<template>
    <div v-if="!!node.key">
    <el-space>
        <el-tag size="large" type="warning" effect="plain"> Key = {{ node.key }}</el-tag>
        <el-tag size="large" type="danger" effect="plain" v-if="!!node.ttl"> ttl = {{ node.ttl }}</el-tag>
        <el-button align="right" @click="show">show</el-button>
    </el-space>
    <mavon-editor v-model="node.value" v-if="!node.dir" defaultOpen="edit" :toolbars="toolbars" :lineNumbers="true"
                  style="height: 80vh; margin-top: 15px" @save="save"/>
    </div>
</template>
<script setup>
import {onMounted, ref, h} from "vue";
import {mavonEditor} from 'mavon-editor';
import 'mavon-editor/dist/css/index.css';
import {ElMessage, ElMessageBox} from 'element-plus'
import {cluster_version, etcd_keys_list, etcd_keys_post, etcd_keys_delete, etcd_keys_put} from "@/api/etcd2.js"

const props = defineProps({
    node: {
        type: Object,
        default: {
            dir: false,
            key: 'string',
            name: 'string',
            value: 'string',
            ttl: 'string',
            createdIndex: 'string',
            modifiedIndex: 'string'
        }
    },
    connect: {
        type: Object,
        default: {
            name: '默认标题',
            url: 'http://127.0.0.1:2379',
            version: 'v2',
            username: 'root',
            password: '123456'
        }
    }
})

const toolbars = ref({
    bold: false, // 粗体
    italic: false, // 斜体
    header: false, // 标题
    underline: false, // 下划线
    strikethrough: false, // 中划线
    mark: false, // 标记
    superscript: false, // 上角标
    subscript: false, // 下角标
    quote: false, // 引用
    ol: false, // 有序列表
    ul: false, // 无序列表
    link: false, // 链接
    imagelink: false, // 图片链接
    code: false, // code
    table: false, // 表格
    fullscreen: false, // 全屏编辑
    readmodel: false, // 沉浸式阅读
    htmlcode: false, // 展示html源码
    help: false, // 帮助
    /* 1.3.5 */
    undo: true, // 上一步
    redo: true, // 下一步
    trash: false, // 清空
    save: true, // 保存（触发events中的save事件）
    /* 1.4.2 */
    navigation: false, // 导航目录
    /* 2.1.8 */
    alignleft: false, // 左对齐
    aligncenter: false, // 居中
    alignright: false, // 右对齐
    /* 2.2.1 */
    subfield: false, // 单双栏模式
    preview: false // 预览
})

function show() {
    ElMessage.success(JSON.stringify(props.node))
    console.log(props.node.value)
}

function save() {
    let url = props.connect.url;
    let version = props.connect.version;

    let key = props.node.key;
    let dir = !!props.node.dir;
    let value = props.node.value;
    const params = new URLSearchParams();
    params.append('dir', dir + '');
    params.append('value', value);
    etcd_keys_put(url, key, params)
        .then((response) => {
            ElMessage.success('Update success')
        })
        .catch((error) => {
            let message = error.message || error.response.data.message;
            ElMessage.error(message)
        });
}
</script>